<template>
	<div style="background-color: #f4fafe;overflow: hidden;">
		<div class="main_header"><span></span><span>{{testid.taskName}}</span>
			<div style="margin-right: 1.25rem;height: 30px;cursor: pointer;" @click="submitJob()">提交</div>
		</div>
		<div class="main">
			<div class="topic">
				<div class="topic_main">
					<div>题目</div>
					<div>共{{questions.length}}题</div>
				</div>

				<div class="question" v-for="(item, idx) in questions" :key="idx">

					<div style="display: flex;">{{ `${idx+1}.[${item.name}](${item.score})`}}
						<div v-html="`${md(item.content)}`"></div>
					</div>
					<div v-for="(Item,indx) in item.optionsList" :key="indx+'hh'" style="display: flex;">
						<div v-if="item.topicId==1">
							<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;" >
								<div style="display: flex;">{{letter[indx]}}:
									<div v-html="`${md(Item.content)}`"></div>
								</div>
							</el-radio>
						</div>
						<div v-if="item.topicId==2">
							<el-checkbox-group v-model="item.answerList">
								<el-checkbox :label="Item.id" :key="indx"  style="margin-top: 1.25rem;">
								<div style="display: flex;">{{letter[indx]}}:
									<div v-html="`${md(Item.content)}`"></div>
								</div>
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
					<div v-if="item.topicId==3">

						<div v-for="(Item,indx) in exam" :key="indx+'hh'" style="display: flex;">
							<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;" >
								<div>{{letter[indx]}}:{{Item.value}}
								</div>
							</el-radio>
						</div>
					</div>
					<div v-if="item.topicId==4" style="height: 22.5rem;">
						<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
					</div>
					<div v-if="item.topicId==5" style="height: 22.5rem;">
						<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
					</div>


				</div>
			</div>
		</div>
	</div>

</template>

<script>
import { TestManager } from "../../../../request/test.js";
import marked from "marked";
export default {
  data() {
    return {
      question: [],
      textname: "",
      questions: [],
      testid: this.$route.params.testid,
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
      exam: [
        {
          value: "正确",
          id: 1,
        },
        {
          value: "错误",
          id: 0,
        },
      ],
    };
  },
  methods: {
    md(content) {
      return marked(content);
    },
    getQuestionnaireTest() {
      console.log(this.$route.params.testid);
      var parmas = {
        id: this.testid.testPaperId,
      };
      TestManager.getQuestionnaireTest(this.qs.stringify(parmas)).then((e) => {
        console.log(e);
        this.question = e.data.data;
        this.textname = this.question.testPaper.name;
        this.questions = e.data.data.questions.map((q) => {
          return {
            ...q,
            answerList: [],
          };
        });
        console.log(this.questions);
      });
    },
    submitJob() {
      var singleList = [];
      var multipleList = [];
      var judgeList = [];
      var fillsList = [];
      var shortAnswer = [];
      let data = [];
      for (let i = 0; i < this.questions.length; i++) {
        // alert(this.danxuanti[i].id);
        if (this.questions[i].topicId !== 2) {
          singleList.push({
            questionId: this.questions[i].id,
            questionAnswer: this.questions[i].answer,
          });
        } else if (this.questions[i].topicId === 2) {
          multipleList.push({
            questionId: this.questions[i].id,
            questionAnswer: this.questions[i].answerList.join(","),
          });
        }
      }
      data.push(...singleList);
      data.push(...multipleList);
      data.push(...judgeList);
      data.push(...fillsList);
      data.push(...shortAnswer);
      TestManager.studentSubmittask(data, 480, this.testid.id).then((res) => {
        console.log(res);
        this.$router.push("/workstu");
      });
    },
  },
  created() {
    this.getQuestionnaireTest();
  },
};
</script>

<style scoped="scoped">
.main_header {
  text-align: center;
  background-color: #03d3bd;
  height: 2.875rem;
  line-height: 2.875rem;
  color: white;
  display: flex;
  justify-content: space-between;
  /* 	position: fixed;
		top: 0; */
  width: 100%;
}

.main {
  background-color: #ffffff;
  min-height: 100vh;
  margin-top: 2rem;
  width: 80%;
  margin-left: 10%;
  border-radius: 0.3125rem;
}

.topic_main {
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
}

.topic {
  margin-top: 3.125rem;
  height: 80%;
  background-color: #fff;
}

.topic .question {
  flex: 5;
  display: flex;
  flex-direction: column;
  padding: 50px;
  border-bottom: 1px solid #dfdfdf;
}

.topic .question .el-radio-group {
  display: flex;
  flex-direction: column;
}

.el-radio-group .el-radio {
  height: 40px;
  line-height: 40px;
}

.question li {
  list-style: none;
  display: block;
  height: 40px;
  margin-left: 1.875rem;
  display: flex;
  align-items: center;
}

.question span {
  display: inline-block;
  height: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #fdf6ec;
}

.question .yes {
  background: #f0f9eb;
  color: #97d3bf;
}

.question .no {
  background-color: #fdf6ec;
  color: #e7ac95;
}

.el-radio {
  display: flex;
  margin-top: 1.875rem;
}
</style>
